<template>
  <el-form
      v-if="searchField && searchField.length > 0"
      :inline="true"
      class="search-form"
      :model="searchData"
      :label-width="labelWidth"
      label-position="right">
    <el-row>
      <el-col class="condition-wrap"
              v-for="(item, index) in searchField"
              :class="{'not_show':(isCollapse&&index+2>rowSize)}"
              :key="index" :span="item.span">
        <el-form-item
            :key="index"
            :label="item.label"
            :prop="item.field"
        >
          <template #default>
            <div class="search-item">
              <!-- 下拉 -->
              <el-select
                  v-if="item.inputType == 'select'"
                  v-model="searchData[item.field]"
                  clearable
              >
                <el-option
                    v-for="(option,i) in item.selectList"
                    :key="i"
                    :value="option.value"
                    :label="option.label"
                />
              </el-select>
              <!--文本-->
              <el-input
                  v-if="item.inputType == 'string'"
                  v-model="searchData[item.field]"
                  clearable
                  maxlength="200px"
                  :placeholder="`请输入${item.label}...`"
              />
            </div>
          </template>
        </el-form-item>
      </el-col>
      <div class="btn-list_less" v-if="searchField.length<rowSize || isCollapse">
        <el-button
            type="text"
            v-if="searchField && searchField.length > rowSize"
            @click="showOrNot"
            style="margin-left:10px">
          {{ collapseText }}
          <el-icon>
            <component :is="isCollapse?'ArrowDown':'ArrowUp'"></component>
          </el-icon>
        </el-button>
        <el-button
            v-for="btn in searchBarButton"
            :type="btn.type"
            plain
            v-btnAntiShake="btn.method"
        >{{ btn.label }}<el-icon v-if="btn.icon" class="el-icon--right">
          <component :is="btn.icon"></component>
        </el-icon>
        </el-button>
      </div>
    </el-row>
    <el-row class="btn-wrap" v-if="searchField.length>=rowSize && !isCollapse">
      <el-col>
        <div class="btn-list_more">
          <el-button
              type="text"
              @click="showOrNot"
              style="margin-left:10px">
            {{ collapseText }}
            <el-icon>
              <component :is="isCollapse?'ArrowDown':'ArrowUp'"></component>
            </el-icon>
          </el-button>
          <el-button
              v-for="btn in searchBarButton"
              :type="btn.type"
              plain
              v-btnAntiShake="btn.method"
          >{{ btn.label }}<el-icon v-if="btn.icon" class="el-icon--right">
            <component :is="btn.icon"></component>
          </el-icon>
          </el-button>
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script lang="ts" setup name='CustomSearch'>
import {} from 'vue'

defineProps({
  //搜索列表
  searchField: {
    type: Array,
    default: []
  },
  //搜索条件
  searchData: {
    type: Object,
    default: {}
  },
  //按钮列表
  searchBarButton: {
    type: Array,
    default: []
  },
  rowSize: {
    type: Number,
    default: 4
  },
  labelWidth:{
    type: Number,
    default: 50
  }
})

let collapseText = ref('展开')
let isCollapse = ref(true)
const showOrNot = () => {
  if (isCollapse.value) {
    isCollapse.value = false
    collapseText.value = '隐藏'
  } else {
    isCollapse.value = true
    collapseText.value = '展开'
  }
}
</script>

<style scoped lang='less'>
.search-form {
  background: #fff;
  margin-bottom: 10px;
  padding: 10px 16px;

  .search-item{
    width: 90%;
  }

  .el-form-item {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center; /*主轴上居中*/
    align-items: center;
  }

  .btn-list_less {
    display: flex;
    align-items: center;
  }

  .btn-wrap {
    padding: 10px 0;

    .btn-list_more {
      width: 100%;
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      align-items: center;
    }
  }
}

.not_show {
  display: none;
}
</style>
